
<template>
   <div>
         <!-- 自定义表头 -->
        <slot name="header"></slot>
        <el-table v-bind="$attrs.table" :data="tableDataList" border v-on="$listeners" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column :selectable="selectable" v-if="tableConfig.showCheckbox" type="selection" align="center"> </el-table-column>
            <el-table-column v-if="tableConfig.showIndex" type="index" :index="indexMethod" label="序号" align="center"> </el-table-column>
            <template v-for="item in tableConfig.columns">
                <!-- 操作按钮 -->
                <template v-if="item.type === 'handle'">
                    <el-table-column align="center" :key="item.fieldName" :label="item.label">
                        <template slot-scope="scope">
                            <el-button v-for="(b, i) in item.buttons" :class="b.isDel?'btn-del':''" size="mini" type="text" :key="i" @click="b.func(scope.$index, scope.row)">{{ b.label }}</el-button>
                        </template>
                    </el-table-column>
                </template>
                <!-- 文本 -->
                <template v-else>
                    <el-table-column
                        show-overflow-tooltip
                        align="center"
                        :key="item.fieldName"
                        :prop="item.fieldName"
                        :label="item.label"
                    ></el-table-column>
                </template>
            </template>
        </el-table>
        <!-- 前端分页 -->
        <div v-if="tableConfig.showPagination" class="pagination">
            <el-pagination
                background
                small
                @size-change="handlePagination"
                @current-change="handlePagination"
                :page-size="formParams.pageSize"
                layout="prev, pager, next, jumper"
                :total="tableData.data.length"
                :current-page.sync="formParams.pageIndex"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            pageIndex: 1,
            pageSize: 5,
            pageSizes: [5, 10],
            formParams: {
                pageIndex: 1,
                pageSize: 5
            },
            tableDataList: []
        };
    },
    created() {
    },
    methods: {
        pageCount(selectPage) {
            const result = [];
            const pageCount = Math.ceil(this.tableData.data.length / this.formParams.pageSize);
            const start = this.formParams.pageSize * selectPage - this.formParams.pageSize;
            let end = this.formParams.pageSize * selectPage;
            end = end > this.tableData.data.length ? this.tableData.data.length : end;
            for (let i = start; i < end; i++) {
                result.push(this.tableData.data[i]);
            }
            this.tableDataList = result;
        },
        tableRowClassName(row){
            row.row.rowIndex = row.rowIndex
        },
        selectable(row) {
            return row.selectable == undefined ? true : row.selectable;
        },
        indexMethod(index) {
            return this.tableConfig.showPagination ? index + 1 + this.pageSize * (this.pageIndex - 1) : index + 1;
        },
        // simple handle
        handlePagination(val) {
            this.pageCount(val);
            // this.currentPageData = this.tableData.slice((this.pageIndex - 1) * this.pageSize, this.pageSize * this.pageIndex);
        }
    },
    watch: {
        'tableData.data': {
            handler(newValue, oldValue) {
                // if (newValue !== oldValue) {
                    if (this.query) {
                        this.formParams = {
                            ...this.formParams,
                            ...this.query
                        };
                    }
                    if (this.tableConfig.showPagination) {
                        // 如果有分页 就分页
                        this.pageCount(this.formParams.pageIndex); // 分页
                    } else {
                        this.tableDataList = this.tableData.data;
                    }
                // }
            },
            deep: true,
            immediate: true,
        }
    },
    props: {
        tableData: {
            type: Object,
            default: () => {}
        },
        //表格数据 tableData:{data:[]}
        tableConfig: {
            type: Object,
            default: () => {}
        }
        // 表格配置项
        // tableConfig:{
        //     showIndex:Boolean 是否显示序号
        //     columns:[{type:"类型",fieldName:'此列id',label:'表头文字',buttons?:[]}] 
        // }
    }
}
</script>
<style lang="scss" scoped>
$page-button-height: 22px;
.pagination {
    /deep/ .el-input--mini {
        .el-input__inner {
            height: $page-button-height;
            line-height: $page-button-height;
        }
        .el-input__icon {
            line-height: $page-button-height;
        }
    }
}
.el-button+.el-button{
    margin-left: 0;
}
.btn-del{
    color: red;
}
</style>